<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Polygons</title>
		<script type="text/javascript" src="tgd/Math/Polygon.js"></script>
		<script type="text/javascript">
			//<![CDATA[

			var _polygon = null;
			var _body = null;
			var _menu = null;
			var _area = null;
			var _centroid = null;
			var _poly = null;
			var _centroidDiv = null;
			var _numPoints = null
			var _points = null;

			function init() {
				_body = document.getElementsByTagName("body")[0];
				_menu = document.getElementById("menu");
				_area = document.getElementById("area");
				_centroid = document.getElementById("centroid");
				_poly = document.getElementById("poly");
				_polygon = new tgd.Math.Polygon();
				_centroidDiv = document.createElement("div");
				_numPoints = document.getElementById("numpoints");
				_points = [];

				for (var i = (_poly.childNodes ? _poly.childNodes.length : -1); i > 0; --i) {
					_poly.removeChild(_poly.childNodes[i - 1]);
				}

				_centroidDiv.className = "point centroid";

				_poly.appendChild(_centroidDiv);
				_area.innerHTML = "0";
				_centroid.innerHTML = "(0, 0)";
				_numPoints.innerHTML = "0";
			}

			function addPoint(event) {
				var point = _polygon.addPoint(event.clientX, event.clientY);
				var div = document.createElement("div");

				_points.push({ Point : point, Div : div });

				div.className = "point";
				div.style.left = (point.X - 2).toString() + "px";
				div.style.top = (point.Y - 2).toString() + "px";
				div.title = "(" + point.X + ", " + point.Y + ")";

				_centroidDiv.style.left = (_polygon.getCentroid().X - 4).toString() + "px";
				_centroidDiv.style.top = (_polygon.getCentroid().Y - 4).toString() + "px";

				_poly.appendChild(div);

				_area.innerHTML = Math.round(_polygon.getArea());
				_centroid.innerHTML = "(" + Math.round(_polygon.getCentroid().X) + ", " + Math.round(_polygon.getCentroid().Y) + ")";
				_numPoints.innerHTML = _points.length;
				_centroidDiv.title = _centroid.innerHTML;
			}

			//]]>
		</script>
		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#333;font-size:.8em;position:relative;}
			p{margin:0;padding:0;}
			label{cursor:pointer;}
			.point{position:absolute;height:4px;width:4px;background:#A4C639;}
			.centroid{border:solid 2px #f0f;}
			#menu{position:fixed;top:0;left:0;font-size:1.5em;border-bottom:solid 1px #ccc;background:#A4C639;color:#666;}
			#info{position:fixed;right:0;top:0;padding:1em;background:#666;color:#A4C639;}
			#poly{height:100%;cursor:default;}
		</style>
	</head>
	<body onload="init();">
		<div id="menu">
			<label for="rbClick">Click for each point:</label>&nbsp;
			<input type="radio" name="rblAction" id="rbClick" onclick="init(); _poly.onclick = addPoint; _poly.onmousemove = _poly.onmousedown = null;" />
			<br />
			<label for="rbMouse">Click and hold to draw polygon:</label>&nbsp;
			<input type="radio" name="rblAction" id="rbMouse" onclick="init(); _poly.onclick = null; _poly.onmousedown = function() { _poly.onmousemove = addPoint; }; _poly.onmouseup = function() { _poly.onmousemove = null; };" />
			<br />
			<a href="javascript:init();">Reset.</a>
		</div>
		<div id="info">
			Area:&nbsp;<span id="area"></span>
			<br />
			Centroid:<span id="centroid"></span>
			<br />
			# of Points:<span id="numpoints"></span>
		</div>
		<div id="poly"></div>
	</body>
</html>